<template>
    <div class="no-data">
        <img class="no-data-img" :width="props.width" :height="props.height" :src="require(`@/assets/img/empty/${props.url}`)" alt="">
        <div class="no-data-info" v-if="showInfo">{{ props.info }}</div>
        <slot></slot>
    </div>
</template>

<script setup>

const props = defineProps({
    info: {
        type: String,
        default: '暂无数据~'
    },
    url: {
        type: String,
        default: 'no-data@2x.png'
    },
    width: {
        type: [String, Number],
        default: 240
    },
    height: {
        type: [String, Number],
        default: 160
    },
    showInfo: {
        type: Boolean,
        default: true
    }
});




</script>

<style lang="scss" scoped>
.no-data {
    text-align: center;
}
.no-data-info {
    font-size: 14px;
    color: var(--color-gray);
    margin-top: 3px;
}
</style>